---
title: "Keyboard Key"
description: "Keyboard key is a component to display which key or combination of keys performs a given action."
---

import {kbdContent} from "@/content/components/kbd";

# Keyboard Key

Keyboard key is a component to display which key or combination of keys performs a given action.

<ComponentLinks component="kbd" rscCompatible />

---

<CarbonAd/>

## Installation

<PackageManagers
  showGlobalInstallWarning
  commands={{
    cli: "npx heroui-cli@latest add kbd",
    npm: "npm install @heroui/kbd",
    yarn: "yarn add @heroui/kbd",
    pnpm: "pnpm add @heroui/kbd",
    bun: "bun add @heroui/kbd"
  }}
/>

## Import

<ImportTabs
  commands={{
    main: 'import {Kbd} from "@heroui/react";',
    individual: 'import {Kbd} from "@heroui/kbd";',
  }}
/>

## Usage

<CodeDemo title="Usage" files={kbdContent.usage} />

### Keys

<CodeDemo title="Keys" files={kbdContent.keys} />

> **Note**: Check the [API](#keyboard-keys) section to see all available keys.

## Slots

- **base**: Kbd wrapper, it handles alignment, placement, and general appearance.
- **abbr**: The `keys` wrapper that handles the appearance of the keys.
- **content**: The children wrapper that handles the appearance of the content.

<Spacer y={4}/>  

## Accessibility

- Each command `key` has a `title` attribute that describes the action that the key performs.

<Spacer y={4}/>  

## API

### Keyboard Key Props

<APITable
  data={[
    {
      attribute: "children",
      type: "ReactNode",
      description: "The content to display in the keyboard key.",
      default: "-"
    },
    {
      attribute: "keys",
      type: "KbdKey | KbdKey[]",
      description: "The keys of the keyboard key.",
      default: "-"
    },
    {
      attribute: "classNames",
      type: 'Partial<Record<"base" | "abbr" | "content", string>>',
      description: "Allows to set custom class names for the keyboard key slots.",
      default: "-"
    }
  ]}
/>

### Keyboard Keys

List of supported keys.

```ts
type KbdKey =
  | "command"
  | "shift"
  | "ctrl"
  | "option"
  | "enter"
  | "delete"
  | "escape"
  | "tab"
  | "capslock"
  | "up"
  | "right"
  | "down"
  | "left"
  | "pageup"
  | "pagedown"
  | "home"
  | "end"
  | "help"
  | "space"
  | "fn"
  | "win"
  | "alt";
```
